<template>
  <div class="test-detail">
  <van-nav-bar
  title="测评详情"
  left-arrow
  @click-left="$router.go(-1)"
/>
  <div v-for="item in moment" class="test-content">
    <div class="avatar">
<div class="avatar-detail">
  <van-image
  round
  class="personl-img"
  width="2rem"
  height="2rem"
  :src="item.author_img"
/>
<div class="name">
  <div>{{ item.author_nickname }}</div>
  <div class="create-time">{{ item.create_time }}</div>
</div>

</div>
<div class="attention" :class="{active:isAttention}" @click="getAttention(item.encrypt_author_mid)">
  <span v-if="!isAttention"> + 关注</span>
  <span v-else>已关注</span>
</div>
</div>
<p class="title">{{ item.moment_title }}</p>
<div class="video">
    <video class="video-item" 
       :src="item.play_url" 
       controls
       > 
      </video>
</div>
<div class="good"><div >
  <van-icon name="good-job-o" size="1.1rem"/><span>{{ item.praise_num }}</span>
</div></div>


<div>

</div>
  </div>
  <div class="comment-content">
    <h3>评论</h3>
  <div class="answer-list-item" v-for="m in momentComment" :key="m.id">
 <div class="answer-img">
  <van-image
  round
  width="2rem"
  height="2rem"
  :src="m.img"
/>
 </div>

<div class="answer-right">
  <div class="answer">
    <div>
    <div  class="nickname">{{ m.nickname }}</div>
    <div>{{ m.create_time }}</div>
  </div>
    <div >
      <span class="support-num">{{ m.support_num }}</span>
      <van-icon name="good-job-o" size="1.1rem"/>
    </div>
</div>
  <p class="answer-content">{{ m.comment }}</p>
  
   <div class="secondary-data" v-if="m.second_comment_list">
    <div class="secondary-data-item" v-for="i in m.second_comment_list" >
<p>
  <span class="se-nickname">{{  i.nickname}}:</span><span class="se-answer-content">{{ i.comment }}</span>
</p>
    </div>
   </div>
</div>
    </div>
</div>
<div class="go-buy">

  <van-button  round>￥ {{ moment[0]?.price }} {{ moment[0]?.button_title  }}</van-button>
 </div>
</div>



</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { getMomentDetail,getMomentCommentList} from '../../../api/find'
import type { momentDataList,contentComment } from '../../../typings';
import { onMounted,reactive,ref} from 'vue'
const route = useRouter();  //调用
let isAttention = ref(false);
let moment = reactive<Array<momentDataList>>([]);
let momentComment = reactive<Array<contentComment>>([]);
const id = Number(route.currentRoute.value.query.id);
 onMounted(() => {
   getData(id);
}
)

const getData = async (id: number) => {
  let res = await getMomentDetail(id);
  let resC = await getMomentCommentList(id);
  moment = res.data.moment_list;
  momentComment = resC.data.comment_list;
  console.log("测评详情=>", moment);
  id
}
const getAttention = (id) => {
  // localStorage
  console.log("关注了它=>", id);
  isAttention.value = !isAttention.value;
  if (isAttention.value) {
    
  }
  
}


</script>

<style lang="scss" scoped>
.test-detail {
  position: fixed;
  width: 100vw;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  overflow: scroll;
  z-index: 99999;
  // padding: 1rem;
  
  .test-content{
    padding: 1rem;
  }
  .comment-content {
    padding: 0rem 1rem;
  }

}
:deep(.van-nav-bar) {
  width: 100vw;
  // background-color: #f2f2f2;
 }
:deep(.van-nav-bar__title) {
    color: #666666;
    font-weight: normal;
}

:deep(.van-nav-bar__arrow) {
    color: #919191;
    font-size: 1.2rem;
}
.avatar{
   display: flex;
   justify-content: space-between;
  //  padding: 1rem;
   .avatar-detail {
    // margin-top: .9rem;
    display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: .8rem;
   }
   .avatar-detail .name {
    margin-left: .8rem;
    // flex: 1;
   }
   .avatar-detail .name .create-time {
    margin-top: .1rem;
    color: #757575;
    font-size: .65rem;
    // color: #ff5934;
   }
   .attention {
    // display: block;
    // margin: .2rem 0rem;
    // margin-bottom: .5rem;
    font-size: .75rem;
    color: #fff;
    // padding: .1rem .5rem;
    border-radius: 99999rem;
    background-color: #ff5934;
    padding: .4rem 1rem;
    box-sizing: border-box;
    border: .08rem solid ff5934;
    span {
      display: block;
      width: 4em;
      // height: .8rem;
      // line-height: .8rem;
      text-align: center;
      box-sizing: border-box;
    }
    &.active{
      background-color: #fff;
      color: #757575;
      border: .08rem solid #666666;
      box-sizing: border-box;
    }
   }
}
.title {
  // padding: 0rem 1rem;
}
.video {
  // padding: 1rem;
  .video-item {
    width: 100%;
  }
}
.good {
  font-size: .8rem;
  height: 2.2rem;
  border-bottom: 1px solid #f5f5f5;
  div {
    float: right;
    margin-top: .2rem;
  }
}
.answer-list-item{
  display: flex;
  padding: .8rem 0rem;
  
  .answer-img {
    margin-right: 1rem;

  }
  .answer-right{
    width: 100%;
    border-bottom:.05rem solid rgba(0,0,0,.1);
    .answer {
      display: flex;
    justify-content: space-between;
    color: rgba(0,0,0,.5);
    font-size: .8rem;
    .nickname {
      margin-right: 1rem;
      font-size: .9rem;
      margin-bottom: .1rem;
    }
    .support-num {
      color: #333;
      margin-right: .2rem;
    }
    }
    .answer-content {
      font-size: .9rem;
      margin: .7rem 0rem .8rem;
    }
 
   
  }
}
:deep(.van-button) {
  background-color: #ff5934;
  color: #fff;
  border: none;
  width: 70vw;
  font-size: 1.1rem;
  margin: .2rem 0rem;

}
.go-buy {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  border-top: .05rem solid #d9d9d9;
  display: flex;
  justify-content: center;
}
</style>
